<div class="class-container mud-full-width d-flex flex-row mt-3">
    <MudBadge Origin="Origin.TopRight" Content="@Count" Color="Color.Default" Overlap Bordered>
        <div class="class-color" style="border: 2px solid @ClassLabel.ColorCode">
            <MudText>@ClassLabel.Index</MudText>
        </div>
    </MudBadge>
    <div class="mud-full-width d-flex flex-row-reverse">
        <MudIconButton Icon="@Icons.Material.Filled.Draw" OnClick="DrawClicked" Class="mt-2" />
        <MudIconButton Icon="@Icons.Material.Filled.Settings" Class="mt-2" OnClick="EditClicked" />
        <MudIconButton Icon="@Icons.Material.Filled.DeleteForever" Color="Color.Error" Class="mt-2" Disabled="@DeleteDisabled" OnClick="DeleteClicked" />
        <MudText Class="mud-full-width mt-2 ml-2">@ClassLabel.Name</MudText>
    </div>
</div>

@code {
    [Parameter, EditorRequired] public AyBorg.Web.Shared.Models.Cognitive.ClassLabel ClassLabel { get; init; } = null!;
    [Parameter] public bool DeleteDisabled { get; init; }
    [Parameter] public int Count { get; init; }
    [Parameter] public EventCallback<AyBorg.Web.Shared.Models.Cognitive.ClassLabel> OnDeleteClicked { get; init; }
    [Parameter] public EventCallback<AyBorg.Web.Shared.Models.Cognitive.ClassLabel> OnEditClicked { get; init; }
    [Parameter] public EventCallback<AyBorg.Web.Shared.Models.Cognitive.ClassLabel> OnDrawClicked { get; init; }

    private async Task DeleteClicked()
    {
        await OnDeleteClicked.InvokeAsync(ClassLabel);
    }

    private async Task EditClicked()
    {
        await OnEditClicked.InvokeAsync(ClassLabel);
    }

    private async Task DrawClicked()
    {
        await OnDrawClicked.InvokeAsync(ClassLabel);
    }
}
